<template>
  <div class="securitySetting">
    <div class="settingList">
      <!-- 请假 -->
      <div class="set">
        <span>请假</span>
        <span>
          <el-switch
            v-model="leaveData.enable "
            active-color="#54cf60"
            inactive-color="#cccccc"
            @change="handleChange(leaveData,$event)"
          />
        </span>
        <i class="el-icon-setting" @click="setFlow()" />
      </div>
      <!-- 加班 -->
      <div class="set">
        <span>加班</span>
        <span>
          <el-switch
            v-model="overtimeData.enable "
            active-color="#54cf60"
            inactive-color="#cccccc"
            @change="handleChange(leaveData,$event)"
          />
        </span>
        <i class="el-icon-setting" />
      </div>
      <!-- 离职 -->
      <div class="set">
        <span>离职</span>
        <span>
          <el-switch
            v-model="quitData.enable "
            active-color="#54cf60"
            inactive-color="#cccccc"
            @change="handleChange(leaveData,$event)"
          />
        </span>
        <i class="el-icon-setting" />
      </div>

      <!-- 弹框 -->
      <el-dialog
        title="提示"
        :visible.sync="showDialog"
        width="30%"
      >
        <span style="text-align:center">
          <el-upload
            class="upload-demo"
            drag
            action="/api/user/process/deploy"
            :headers="myheader"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-error="onError"
            :on-success="onSuccess"
            :file-list="fileList"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="showDialog = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { suspend, getFlowList } from '@/api/approvals'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      // 请假
      leaveData: {
        enable: false
      },
      //   加班
      overtimeData: {
        enable: false
      },
      //   离职
      quitData: {
        enable: false
      },
      showDialog: false,
      // 上传的文件列表
      fileList: []
      // 文字
    //   uploadTip:'点击上传',
    //   processing:fasle
    }
  },
  computed: {
    //   获取 token 值
    myheader: () => {
      return {
        Authorization: `Bearer ${getToken()}`
      }
    }
  },
  created() {
    this.getFlowList()
  },
  methods: {
    // 获取流程定义
    async getFlowList() {
      const res = await getFlowList()
      console.log(res)
      res.map(item => {
        const items = {
          ...item,
          enable: item.persistentState.suspensionState !== 2
        }
        // console.log(items)
        if (items.key === 'process_dimission') {
          this.quitData = items
        } else if (item.key === 'process_leave') {
          this.leaveData = items
        } else {
          this.overtimeData = items
        }
      })
      // console.log(this.quitData)
      // console.log(this.leaveData)
      // console.log(this.overtimeData)
    },
    //   点击改变开关
    handleChange(obj, e) {
      // console.log(obj)
      // console.log(e)
      const parent = {
        processKey: obj.key,
        enable: e
      }
      suspend(parent)
    },
    setFlow() {
      this.showDialog = true
    },
    // 上传前的钩子
    beforeUpload(file) {
      // console.log(file)
    },
    // 文件上传失败的钩子
    onError(err, file, fileList) {
    //   console.log(err, file, fileList)
    //   this.uploadTip = "点击上传"
    //   this.processing = false
      this.$message.error(err)
    },
    // 文件上传成功的钩子
    onSuccess(res, file, fileList) {
    //   console.log(response, file, fileList)
      if (res.code === 99999) {
        this.$message.error('文件类型不正确，请重新上传')
      } else {
        this.$message.success('上传成功！')
        // 关闭弹框
        this.showDialog = false
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "./../../styles/variables";
$active: #13ce66;
$inactive: #ccc;
.securitySetting {
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  margin: 15px;
  border: 1px solid #ebeef5;
  .settingList {
    margin-bottom: 20px;
    .title {
      font-weight: bold;
      line-height: 40px;
      margin-bottom: 20px;
      border-bottom: solid 1px #ccc;
    }
    .set {
      border: solid 1px #ccc;
      border-radius: 3px;
      padding: 15px 30px 15px 20px;
      position: relative;
      display: inline-block;
      margin-right: 20px;
      span:first-child {
        padding-right: 15px;
        border-right: solid 1px #ccc;
        margin-right: 15px;
      }
      .el-icon-setting {
        position: absolute;
        right: 5px;
        top: 5px;
        color: #999;
      }
    }
  }
}
</style>
